<!DOCTYPE html>
<html>
	<head>
		<meta name='viewport'
			content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'
			charset='utf-8' content="zh-CN" />
		<meta name="renderer" content="webkit">
		<title>金制空气注册使用协议</title>
		<script src="js/vue.js"></script>
		<!-- 引入样式文件 -->
		<link type="text/css" rel="styleSheet" href="css/vant.css" />
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="js/vant.js"></script>

		<style>
			.title {
				padding: 16px 0;
				font-size: 0.875rem;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 22px;
				font-weight: bold;
			}

			.van-picker-column {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				overflow: hidden;
				font-size: 0.875rem;
			}
			
			#ifm {
				background-color : transparent;
			}
		</style>

	</head>
	<script language="javascript" type="text/javascript">
		function dyniframesize(down) {
			var pTar = null;
			if (document.getElementById) {
				pTar = document.getElementById(down);
			} else {
				eval('pTar = ' + down + ';');
			}
			if (pTar && !window.opera) {
				//begin resizing iframe
				pTar.style.display = "block"
				if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {
					//ns6 syntax
					pTar.height = pTar.contentDocument.body.offsetHeight;
				} else if (pTar.Document && pTar.Document.body.scrollHeight) {
					//ie5+ syntax
					pTar.height = pTar.Document.body.scrollHeight;
				}
			}
		}
	</script>
	<body>
		<div id="version-box" class="content">
			<div>
				<div id="select" @click="showPopup()" style="float: right;font-size: 0.875rem !important;margin-bottom: 10px;">
					选择版本：{{chVersion}}
					<van-icon name="arrow-down" style="padding-top: 10px;" />
				</div>
			</div>

			<div class="versionContent">
				<iframe :src="url" onload="javascript:dyniframesize('ifm')" id="ifm" name="ifm" frameBorder=0
					marginheight="0" marginwidth="0" scrolling=no width="100%" allowtransparency="true"></iframe>


			</div>
			<div id="va">
				<van-popup v-model="show" round position="bottom" :style="{ height: '350px' }" closeable
					close-icon-position="top-left">
					<div class="title" style="text-align: center;">查阅历史版本</div>
					<div class="picker">
						<van-picker :columns="versionInfo" @change="onChange"  :item-height="35"/>
					</div>
					<div class="button" style="text-align: center;">
						<van-button type="primary" style="width: 40%;border-radius:10px;" @click="onConfirm()">确定
						</van-button>
					</div>

				</van-popup>
			</div>
		</div>
	</body>
</html>
<script>
	function iframeNew(url){
		var oldIframe = document.getElementById("ifm");
		var iframe = document.createElement('iframe');
		iframe.setAttribute("id", "ifm");//添加id属性
		iframe.setAttribute("name", "ifm");
		iframe.setAttribute("frameborder", "0");
		iframe.setAttribute("marginheight", "0");
		iframe.setAttribute("marginwidth", "0");
		iframe.setAttribute("scrolling", "no");
		iframe.setAttribute("width", "100%");
		iframe.setAttribute("allowtransparency", "true");
		iframe.setAttribute("onload","javascript:dyniframesize('ifm')");//添加onLoad事件
		iframe.src = url;
		oldIframe.parentNode.insertBefore(iframe,oldIframe);//添加新的ifrema
		//移除旧的iframe
		if (!!oldIframe){
			oldIframe.src="about:blank";
			oldIframe.parentNode.removeChild(oldIframe);
		}
	}
</script>
<script type="module">
	import data from './js/userAgreementData.js'

	let content = new Vue({
		el: '.content',
		data: {
			versionInfo: [],
			show: false,
			url: '',
			checkVersion: '',
			chVersion: '',
			vertionData: [],
			realUrl: ''
		},
		created() {
			this.getVersion();
		},
		methods: {
			getVersion() {
				this.vertionData = data
				this.chVersion = this.vertionData[0].version
				for (let i = 0; i < this.vertionData.length; i++) {
					if (this.vertionData[i].version === this.chVersion) {
						this.url = this.vertionData[i].url
					}
					this.versionInfo.push(this.vertionData[i].version)
				}
			},
			showPopup() {
				this.show = true
			},
			onChange(picker, value, index) {
				this.checkVersion = value
			},
			onConfirm() {
				this.vertionData = data
				for (let i = 0; i < this.vertionData.length; i++) {
					if (this.vertionData[i].version === this.checkVersion) {
						iframeNew(this.vertionData[i].url);
					}
				}
				this.show = false
				if (this.checkVersion !== "") {
					this.chVersion = this.checkVersion
				}

			},


		}

	})
</script>
